<template>
    <view class="order-item-container">
        <span class="serial-number">{{ serialNumber }}</span>
        <view class="order-item-info-container">
            <span>订单号码：</span>
            <span class="right-text">{{ orderNumber }}</span>
        </view>
        <view class="order-item-info-container">
            <span>发送时间：</span>
            <span class="right-text">{{ sendTime }}</span>
        </view>
        <view class="order-item-info-container">
            <span>类型：</span>
            <span class="right-text">{{ type }}</span>
        </view>
        <view class="order-item-info-container">
            <span>金额：</span>
            <span class="amount">{{ amount }}元</span>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
    serialNumber: [Number, String],
    orderNumber: [Number, String],
    sendTime: String,
    type: String,
    amount: Number
});
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.order-item-container {
    @extend .column-layout;
    justify-content: flex-start;
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    .serial-number {
        border-radius: 10px 0;
        background: #88baff;
        min-width: 20px;
        height: 23px;
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        text-align: center;
    }
    .order-item-info-container {
        @extend .row-layout;
        justify-content: space-between;
        padding: 7.5px 0;
        .right-text {
            color: black;
            font-size: 16px;
        }
        .amount {
            @extend .right-text;
            color: #e25111;
            font-weight: bold;
        }
    }
}
</style>
